<template>
  <a-card>
    <a-row>
      <a-button
        :loading="asyncLoad"
        type="primary"
        style="float: right"
        @click="SyncData"
      >
        与用友同步
      </a-button>
    </a-row>

    <a-row style="margin-top: 20px">
      <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
        <a-tree
          :tree-data="treeDetilData"
          :expanded-keys="expandedKeys"
          @expand="onExpand"
          @select="onSelect"
          :default-selected-keys="defaultSelectedKeys"
          :replace-fields="replaceFields"
        >
        </a-tree>
      </a-col>
      <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
        <a-card :title="title">
          <!-- <a slot="extra" @click="addModal" style="margin-right: 10px"
            >新增节点</a
          >
          <a slot="extra" @click="updateModal">修改该节点 </a> -->
          <!-- <p>{{ describe }}</p> -->
          <!-- <p>
            <a-tree
              :tree-data="treeDetilData_right"
              default-expand-all
              v-if="!spinning"
            >
            </a-tree>
          </p> -->
          <!-- <p>该工序定额 {{ money }}</p> -->
        </a-card>
      </a-col>
    </a-row>

    <!-- 新增对话框弹窗 -->
    <a-modal v-model="addModalVisible" title="存货分类新增节点" width="50%">
      <template slot="footer">
        <a-button @click="addParentInfo" :disabled="!addParentButton">
          添加分类
        </a-button>
        <a-button
          @click="addChildrenInfo"
          type="primary"
          :disabled="addParentButton"
        >
          添加子节点
        </a-button>
      </template>

      <a-form-model
        ref="ruleForm"
        :model="addForm"
        :rules="modalRules"
        v-bind="modalLayout"
      >
        <a-row>
          <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
            <a-form-model-item label="选择父节点">
              <a-tree-select
                v-model="addForm.parentId"
                style="width: 100%"
                allow-clear
                tree-default-expand-all
                placeholder="添加存货时，不需要选择"
                :tree-data="treeData"
                @change="disableParentButton"
              >
              </a-tree-select>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row v-show="ShowBottom2">
          <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
            <a-form-model-item ref="name" label="添加分类编码">
              <a-input v-model="addForm.number"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
            <a-form-model-item ref="name" label="添加分类名称">
              <a-input v-model="addForm.name"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
            <a-form-model-item ref="name" label="添加外文名称">
              <a-input v-model="addForm.forinvname"></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row v-show="ShowBottom">
          <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
            <a-form-model-item
              ref="describe"
              label="分类/存货编码"
              prop="describe"
            >
              <a-input v-model="addForm.number_child"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
            <a-form-model-item
              ref="describe"
              label="分类/存货名称"
              prop="describe"
            >
              <a-input v-model="addForm.name_child"></a-input>
            </a-form-model-item>
          </a-col>

          <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
            <a-form-model-item ref="describe" label="外文名称" prop="describe">
              <a-input v-model="addForm.forinvname_child"></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>

    <!-- 更新对话框弹窗 -->
    <a-modal v-model="updateModalVisible" title="存货分类修改节点" width="50%">
      <template slot="footer">
        <a-button type="danger" @click="deleteModal"> 删除 </a-button>
        <a-button type="primary" @click="updateModalOk"> 提交 </a-button>
      </template>

      <a-form-model
        ref="ruleForm"
        :model="updateForm"
        :rules="modalRules"
        v-bind="modalLayout"
      >
        <a-row>
          <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
            <a-form-model-item ref="number" label="编码">
              <a-input v-model="updateForm.number" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
            <a-form-model-item ref="name" label="名称">
              <a-input v-model="updateForm.title" />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
            <a-form-model-item ref="name" label="外文名称">
              <a-input v-model="updateForm.forinvname" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
  </a-card>
</template>

<script>
import { CunHuoFenLeiHttp } from "../../services/modules/JiChuXinXiGuanLi/CunHuoFenLei";
const $http = new CunHuoFenLeiHttp();
import axios from "axios";
import { CommonAjax } from "../../services/modules/common";
const common = new CommonAjax();
export default {
  data() {
    return {
      replaceFields: {
        children: "syncInventoryClassificationEntityList",
        title: "invclassname",
      },
      // -------------------- 右侧侧工序树 --------------
      spinning: true, //展开所有树节点
      treeDetilData_right: [],
      // -------------------- 左侧工序树 --------------
      treeDetilData: [],
      // 详细信息，树选择
      selectdKey: "", //  被选择的key值，用于修改
      expandedKeys: [15], // 默认展开节点
      defaultSelectedKeys: [], // 默认选择节点

      // -------------------- 更新对话框中的表单 --------------
      // 更新对话框表单
      updateForm: {
        id: "",
        parentId: "",
        title: "",
        number: "",
        forinvname: "",
        forinvname_child: "",
      },
      asyncLoad: false,
      updateModalVisible: false, // 更新工序弹窗
      title: "存货分类管理", // 默认卡片名称
      describe: "展开所有:", // 默认描述信息
      number: "",
      // money: "", // 默认显示定额
      forinvname: "", //外文名称
      forinvname_child: "", //外文名称
      sealdate: "", //封存标志

      disableArray: [
        "工序",
        "出菇工序",
        "包装工序",
        "选菇岗位",
        "包装岗位",
        "包装其他",
        // "选菇",
      ], // 禁用的数组

      // -------------------- 新增对话框中的表单 --------------
      // 新增对话框表单
      addForm: {
        //添加父节点
        name: "", //存货分类名称
        number: "", //存货分类编码
        forinvname: "", //存货分类外文名称

        //添加子节点
        parentId: "",
        name_child: "",
        number_child: "",
        forinvname_child: "",
      },
      treeData: [], // 下拉按钮中的树
      addParentButton: true, // 用来控制子节点和父节点添加按钮的显示情况
      addModalVisible: false, // 添加工序弹窗
      ShowBottom: false, //控制所属仓位、库号是否显示
      ShowBottom2: true,

      // -------------------- 整体对话框布局和规则 --------------
      modalLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 15 },
      },
      // 对话框验证规则
      modalRules: {
        title: [
          { required: true, message: "工序名称不能为空", trigger: "blur" },
        ],
        quota: [
          { required: true, message: "工序定额不能为空", trigger: "blur" },
        ],
      },
    };
  },

  mounted() {
    this.GetSaveCargoClassification();
  },
  methods: {
    // 左侧工序树列表
    GetSaveCargoClassification() {
      this.treeDetilData = [];
      $http.GetSaveCargoClassification().then((res) => {
        console.log("树数据：：：：：：：：", res.result);
        this.treeDetilData = res.result;
        this.disableParent(this.treeDetilData);
        this.treeDetilData_right = res.result;
        this.spinning = false; //加v-if判断，数据请求回来之后再去渲染 a-tree 树形控件
      });
    },
    // 展开函数，设置了默认展开的时候所带的
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    // 树选择函数，节点数选择
    onSelect(selectedKeys, e) {
      console.log(e);
      this.selectdKey = selectedKeys[0];
      console.log("this.selectdKey", this.selectdKey);
      this.invclassname = e.selectedNodes[0].data.props.dataRef.invclassname;
      this.invclasscode = e.selectedNodes[0].data.props.dataRef.invclasscode;
      this.forinvname = e.selectedNodes[0].data.props.dataRef.forinvname;
      this.sealdate = e.selectedNodes[0].data.props.dataRef.sealdate;

      if ((this.sealdate == null) | NaN) {
        this.title =
          this.invclasscode +
          " " +
          this.invclassname +
          " " +
          this.forinvname +
          " " +
          "是否封存:" +
          "否";
      } else {
        this.title =
          this.invclasscode +
          " " +
          this.invclassname +
          " " +
          this.forinvname +
          " " +
          "是否封存:" +
          this.sealdate;
      }

      // if (this.forinvname == undefined) {
      //   this.title = this.number + this.title;
      // } else {
      //   this.title = this.number + this.title + this.forinvname; //选择节点，将编号、名称、外文名称拼接
      // }

      // this.updateForm.id = e.selectedNodes[0].data.props.dataRef.id;
      // this.updateForm.parentId = e.selectedNodes[0].data.props.dataRef.parentId;
      // this.updateForm.title = e.selectedNodes[0].data.props.dataRef.title;
      // this.updateForm.number = e.selectedNodes[0].data.props.dataRef.number;
      // this.updateForm.forinvname =
      //   e.selectedNodes[0].data.props.dataRef.forinvname;
      // this.updateForm.forinvname_child =
      //   e.selectedNodes[0].data.props.dataRef.forinvname_child;

      this.spinning = false; //加v-if判断，数据请求回来之后再去渲染 a-tree 树形控件
    },
    // -------------------- 新增对话框中的事件 --------------
    // 添加分类
    addParentInfo() {
      let data = {
        name: this.addForm.name,
        number: this.addForm.number,
        forinvname: this.addForm.forinvname,
        // introduce: this.addForm.introduce,
      };
      // console.log(data);
      $http.SaveCargoClassification(data).then((res) => {
        if (res.code == 200) {
          this.save_U8C(); //用友人员信息新增/修改
          this.addModalVisible = false;
          this.$message.success("添加成功");
          this.GetSaveCargoClassification();

          this.addForm = {};
          this.addParentButton = true; // 用来控制子节点和父节点添加按钮的显示情况
          this.addModalVisible = false; // 添加工序弹窗
          this.ShowBottom = false; //控制所属仓位、库号是否显示
        } else {
          this.$message.success("添加失败");
        }
      });
    },

    save_U8C() {
      //U8c
      axios({
        headers: {
          "Access-Control-Allow-Origin": "*",
          // trantype: "code",
          "Content-Type": "application/json",
          usercode: "13355262265",
          password: "5ef208ee90e5504a7b569ebbd6342634",
          system: "test",
        },
        method: "post",
        url: "/proxy/u8cloud/api/uapbd/bdinvcl/save",
        data: {
          invcl: [
            {
              invclasscode: this.addForm.number,
              invclassname: this.addForm.name,
              invclassforinvname: this.addForm.forinvname,
              pk_corp: "1001", //公司编码
            },
          ],
        },
      }).then(function (response) {
        console.log(response);
      });
    },

    save_U8C2() {
      //U8c
      axios({
        headers: {
          "Access-Control-Allow-Origin": "*",
          // trantype: "code",
          "Content-Type": "application/json",
          usercode: "13355262265",
          password: "5ef208ee90e5504a7b569ebbd6342634",
          system: "test",
        },
        method: "post",
        url: "/proxy/u8cloud/api/uapbd/bdinvcl/save",
        data: {
          invcl: [
            {
              invclasscode: this.addForm.number_child,
              invclassname: this.addForm.name_child,
              invclassforinvname: this.addForm.forinvname,
              pk_corp: "1001", //公司编码
            },
          ],
        },
      }).then(function (response) {
        console.log(response);
      });
    },

    // 添加子节点
    addChildrenInfo() {
      let data = {
        parentId: this.addForm.parentId,
        number: this.addForm.number_child,
        name: this.addForm.name_child,
        forinvname_child: this.addForm.forinvname_child,
      };
      // console.log(data);
      $http.SaveCargoClassification(data).then((res) => {
        if (res.code == 200) {
          // this.save_U8C2(); //用友人员信息新增/修改

          this.$message.success("添加成功");
          this.GetSaveCargoClassification();

          this.addForm = {}; //重置
          this.ShowBottom2 = true; //控制添加父节点是否显示
          this.ShowBottom = false; //控制添加子节点是否显示

          this.addParentButton = true; // 用来控制子节点和父节点添加按钮的显示情况
          this.addModalVisible = false; // 添加工序弹窗
        } else {
          this.$message.success("添加失败");
        }
      });
    },
    // 控制添加父子节点的显示情况
    disableParentButton() {
      console.log(this.addForm.parentId);
      if (typeof this.addForm.parentId == "undefined") {
        this.addParentButton = true;
        this.ShowBottom = false;
        this.ShowBottom2 = true;
      } else {
        this.addParentButton = false;
        this.ShowBottom = true;
        this.ShowBottom2 = false;
      }
    },

    // 下拉选择中的树
    getSelectTree() {
      $http.GetSaveCargoClassification().then((res) => {
        // console.log("树数据：：：：：：：：", res);
        this.treeData = res.result;
        // this.disableParent(this.treeData);
      });
    },

    // 禁用节点
    disableParent(Tree) {
      Tree.forEach((item) => {
        if (this.disableArray.includes(item.name)) {
          item[`disabled`] = true;
          if (item.children) {
            // console.log(item.title)
            this.disableParent(item.children);
          }
        } else {
          console.log(item.title);
          if (item.children) {
            // console.log(item.title)
            this.disableParent(item.children);
          }
        }
      });
    },

    // 新增按钮事件
    addModal() {
      this.getSelectTree();
      this.addModalVisible = true;
    },
    // -------------------- 修改对话框中的事件 --------------
    // 修改弹窗按钮
    updateModal() {
      if (this.selectdKey == "") {
        this.$message.error("没有选择节点");
      } else {
        this.updateModalVisible = true;
      }
    },
    // 修改弹窗确定
    updateModalOk() {
      let data = {
        id: this.updateForm.id,
        number: this.updateForm.number,
        name: this.updateForm.title,
        parentId: this.updateForm.parentId,
        forinvname: this.updateForm.forinvname,
      };
      // console.log(data);
      $http.UpdateCargoClassification(data).then((res) => {
        if (res.code == 200) {
          this.updateModalVisible = false;
          this.$message.success("修改成功");
          this.GetSaveCargoClassification();
          if (this.updateForm.forinvname == undefined) {
            this.title = this.updateForm.number + this.updateForm.title;
          } else {
            this.title =
              this.updateForm.number +
              this.updateForm.title +
              this.updateForm.forinvname;
          }
        } else {
          this.$message.success("修改失败");
        }
      });
    },
    // 删除弹窗
    deleteModal() {
      let queryPath = "?id=" + this.selectdKey;
      $http.DeleteCargoClassification(queryPath).then((res) => {
        if (res.code == 200) {
          this.updateModalVisible = false;
          this.$message.success("删除成功");
          this.GetSaveCargoClassification();
          this.title = "存货分类管理";
        } else {
          this.$message.success("删除失败");
        }
      });
    },

    // 选择存货编码的change触发函数
    DepotNameChange(value, option) {
      console.log(value, option);
      const newValue = value.split("|");
      console.log(newValue);
      this.addForm.title = newValue[0];
      this.addForm.name = newValue[1];
      this.addForm.forinvname = newValue[2];
    },
    //同步用友数据
   /*  SyncData() {
      this.asyncLoad = true; //

      common.asyncInventoryClassification().then((res) => {
        console.log("同步用友的数据", res);
        if (res.code == 200) {
          this.$message.success("同步成功");
        } else {
          this.$message.error("同步失败");
        }
        this.asyncLoad = false;
      });
      this.GetSaveCargoClassification();
    }, */
    SyncData() {
      this.Loading = true;
      let data = "?transFileName=" + "SyncInventoryClassification.ktr";
      common.asyncInventoryClassification(data).then((res) => {
        console.log("res", res);
        if (res.success) {
          this.$message.success("同步成功！");
          this.GetSaveCargoClassification();
          this.Loading = false;
        } else {
          this.$message.error("同步失败！" + res.message);
          this.Loading = false;
        }
      });
    },
  },
};
</script>

<style></style>